<template>
  <section>
    <el-upload
      ref="video"
      class="upload-video"
      drag
      :headers="head"
      :action="sys ? sysUrl : actionUrl"
      :limit="limit"
      :file-list="fileList"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :before-upload="beforeUploadVideo"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-progress v-show="progressFlag" :percentage="loadProgress"></el-progress>
  </section>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Array],
      default: function () {
        return "";
      },
    },
    type: {
      type: [String, Number],
      default: "",
    },
    path: {
      type: String,
      default: "system",
    },
    sys: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: [Number],
      default: 1,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
     uploadDisabled: false, //是否允许上传
      dialogImageUrl: "",
      dialogVisible: false,
      actionUrl: window.api.uploadUrl1 + `?path=${this.path}`,
      sysUrl: window.api.sysUploadUrl + `?path=${this.path}`,
      head: {
        userRole: "ADMIN",
        token: window.sessionStorage.getItem("token"),
      },
      fileList: [],
      progressFlag: false,
      loadProgress: 0,
    };
  },
  watch: {
    value(val) {
      if (val) {
        let list = [];
        if (val.indexOf(",") !== -1) {
          list = val.split(",");
        } else {
          list = [val];
        }
        console.log(list);
        this.fileList = [];
        list.map((it) => {
          this.fileList.push({
            name:it,
            url: window.api.image + "/" + it,
          });
        });
        if (this.limit > 1 && !this.multiple) {
        //   return;
        }
        this.uploadDisabled = true;
      } else {
        this.uploadDisabled = false;
      }
    },
  },
  methods: {
    // 上传成功
    handleSuccess(response, file, fileList) {
      console.log("success1:", response);
      console.log("success2:", file);
      console.log("success3:", fileList);
      this.$emit(
        "add-picture",
        this.sys ? response : response.value,
        this.type,
        fileList
      );
      fileList.map((i) => {
        if (!i.response) {
          console.log(i.url.indexOf("appliance"));
          console.log(i.url.slice(i.url.indexOf("appliance")));
          i.response = {
            value: i.url.slice(i.url.indexOf("appliance")),
          };
        }
      });
      const fileListArr = fileList.map((item) => item.response.value).join(",");
      this.$emit("input", fileListArr);
      if (this.limit > 1 && !this.multiple) {
        return;
      }
      this.uploadDisabled = true;
      this.progressFlag = true;
      this.loadProgress = 0;
      const interval = setInterval(() => {
        if (this.loadProgress >= 99) {
          clearInterval(interval);
          this.loadProgress += 1;
          setTimeout(() => {
            this.progressFlag = false;
            this.loadProgress = 0;
          }, 1500);
          return;
        }
        this.loadProgress += 1;
      }, 20);
    },

    handleRemove(file, fileList) {
      console.log(fileList);
      fileList.map((i) => {
        if (!i.response) {
          console.log(i.url.indexOf("appliance"));
          console.log(i.url.slice(i.url.indexOf("appliance")));
          i.response = {
            value: i.url.slice(i.url.indexOf("appliance")),
          };
        }
      });
      const fileListArr = fileList.map((item) => item.response.value).join(",");
      this.$emit("input", fileListArr);
    //   this.$emit("del-picture", this.type, fileListArr);
      this.uploadDisabled = false;
    },

    //视频上传
    UploadVideo(params) {
      this.form.videoPath = URL.createObjectURL(params.file);
      this.progressFlag = true;
      this.loadProgress = 0;
      const interval = setInterval(() => {
        if (this.loadProgress >= 99) {
          clearInterval(interval);
          return;
        }
        this.loadProgress += 1;
      }, 20);
      upload("/api/EToolFile", params.file).then((res) => {
        console.log(res);
        this.form.videoPath = res.data.data.name;
        this.progressFlag = false;
        this.loadProgress = 100;
        this.$message({
          type: "success",
          message: "上传成功!",
        });
        // 清空上传列表
        this.$refs.video.clearFiles();
      });
    },
    beforeUploadVideo(file) {
      this.loadProgress = 0;
      const isLt30M = file.size / 1024 / 1024 < 30;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt30M) {
        this.$message.error("上传视频大小不能超过30MB哦!");
        return false;
      }
    },
  },
};
</script>
<style scoped>
</style>